<template>
	<view>
		<z-paging ref="paging" v-model="goodsList" @query="getPage" :auto="false">
			<cu-custom slot="top" :isBack="true" :bgColor="'bg-'+ theme.themeColor">
				<block slot="backText">返回</block>
				<block slot="content">商品列表</block>
			</cu-custom>
			<!-- <view slot="top" class="cu-bar search" :class="'bg-'+ theme.themeColor">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" v-model="searchKeyword" placeholder="搜索商品"
						confirm-type="search"></input>
					<button class="cu-btn round sm margin-xs" :class="'bg-'+ theme.themeColor"
						@tap="doSearch()">搜索</button>
				</view>
				<view class="action text-xxl">
					<text :class="waterfall ?'cuIcon-list' :'cuIcon-cascades'"></text>
				</view>
			</view> -->
			<view style="margin-top: 5px;">
				<!-- <zero-filter-bar slot="top" :width="100" selectColor="#000000" defaultColor="#909399"
					ref="zeroFilterBar" @extraClick='showDrawer()' :needSticky="needSticky" :dataList="filterList"
					@filter='handleFilterItem'>
				</zero-filter-bar> -->
				<goods-list :goodsList="goodsList"></goods-list>
			</view>
		</z-paging>
		<view class="cu-modal drawer-modal justify-end" :class="drawer?'show':''" @tap="hideDrawer">
			<view class="cu-dialog basis-lg" @tap.stop=""
				:style="[{top:customBar+'px',height:'calc(100vh - ' + customBar + 'px)'}]">
				<view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
						<view class="content">
							<view>Item {{index +1}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsList from "components/goods-list/col-list/index";
	import {
		getPage as goodsSpuPage
	} from '@/api/goodsspu.js';
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				customBar: 0,
				theme: getApp().globalData.theme,
				goodsList: [],
				searchKeyword: '',
				categorySecondId: '',
				isLoad: true,
				couponId: '',
				waterfall: true,
				filterList: [{
						id: 0,
						name: '综合推荐',
					},
					{
						id: 1,
						name: '销量'
					},
					{
						id: 2,
						name: '价格',
						sort: true
					}
				],
				drawer: false,
				// 如果顶部还有内容，且需要吸顶效果，可以传入needSticky
				needSticky: false,

				page: {
					descs: '',
					ascs: ''
				}

			}
		},
		onLoad(option) {
			if (option.categorySecondId) {
				this.categorySecondId = option.categorySecondId;
			}

			if (option.couponId) {
				this.couponId = option.couponId;
			}
			if (option.searchKeyword) {
				this.searchKeyword = option.searchKeyword;
			}
			this.$nextTick(function() {
				this.$refs.paging.reload();
			})
		},
		methods: {
			/**
			 * 分页查询
			 */
			getPage(pageNo, pageSize) {
				goodsSpuPage({
					current: pageNo,
					size: pageSize,
					descs: this.page.descs,
					ascs: this.page.ascs,
					name: this.searchKeyword,
					categorySecondId: this.categorySecondId
				}).then(res => {
					this.$refs.paging.complete(res.data.records);
				});
			},
			/**
			 * 关键字搜索
			 */
			doSearch() {
				if (this.searchKeyword) {
					let historyList = uni.getStorageSync('search-history') ? uni.getStorageSync('search-history') : [];
					//过滤重复搜索
					this.searchHistoryList = historyList.filter(v => v != this.searchKeyword);
					// 数组头部插入
					this.searchHistoryList.unshift(this.searchKeyword);
					//缓存搜索记录
					uni.setStorageSync('search-history', this.searchHistoryList);
				}
				this.$refs.paging.reload();
			},
			handleFilterItem(index, desc, item) {
				this.page.descs = "";
				this.page.ascs = "";
				switch (index) {
					case 1: // 销量排序
						this.page.descs = "sales_volume";
						break
					case 2: // 价格排序
						if (desc) {
							this.page.descs = "low_price";
						} else {
							this.page.ascs = "low_price";
						}
						break
				}
				this.$refs.paging.reload();
			},
			showDrawer() {
				this.drawer = true;
			},
			hideDrawer() {
				this.$refs.zeroFilterBar.setCurrentExtraOn()
				this.drawer = false;
			}

		}
	}
</script>

<style>

</style>
